import React from 'react';

class ListSearch extends React.Component{
    constructor(props){
        super(props);
        this.state={
            searchType:'productId',//productId,productName
            searchKeyword:''
        }
    }
    // 数据变化的时候
    onValueChange(e){
        let  name = e.target.name,
            value = e.target.value.trim();
            this.setState({
                [name]:value
            });
    } 
    // 点击搜索按钮的时候
    onSearch(){ 
        //这里的onSearch 事件是父级的事件 这里用 this.props去掉用
        //然后传值用 this.state
        this.props.onSearch(this.state.searchType,this.state.searchKeyword);
    }
    // 这里是输入关键字后 按回车 自动提交
    onSearchKeywordKeyUp(e){
        if(e.keyCode ===13){
            //调用事件 用this去找 这里的this 指的是这个组件
            this.onSearch();
        }
       
    }
    render(){
        return(
            <div className="col-md-12 search-wrap">
                <div className="form-inline">
                    <div className="form-group">
                        <select className="form-control" 
                        name="searchType"
                        onChange={(e)=>this.onValueChange(e)}>
                            <option value="productId">按商品ID查询</option> 
                            <option value="productName">按商品名称查询</option> 
                        </select>
                    </div>
                    <div className="form-group">
                        <input type="text" className="form-control" 
                        onKeyUp={(e)=>this.onSearchKeywordKeyUp(e)}
                        name="searchKeyword"
                        onChange={(e)=>this.onValueChange(e)}
                        placeholder="关键词" />
                    </div>
                    <button type="submit" onClick={(e)=>this.onSearch()} className="btn btn-primary">查找</button>
                </div>
            </div>
        )
    }
}
export default ListSearch;